<div id="header">
  <div id="header-error" style="display: none;"><b>Error:</b> {{error}}</div>
  <div iv="header-body">
    <label>Operations</label>
    <div id="operations">
        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.up()" {{#unless operations.up}}disabled="disabled"{{/unless}}><span class="glyphicon glyphicon-arrow-up"></span> Up</button>
        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.reload()"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
      {{#if operations.post}}
        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.create()"><span class="glyphicon glyphicon-plus"></span> Create</button>
      {{/if}}
      {{#if operations.put}}
        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.update()"><span class="glyphicon glyphicon-edit"></span> Edit</button>
      {{/if}}
      {{#if operations.delete}}
        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.remove()"><span class="glyphicon glyphicon-trash"></span> Delete</button>
      {{/if}}
    </div>
    <br/>

    <label>Actions</label>
    <div>
      {{#eachProperty actions}}
        <button type="button" class="btn btn-success btn-sm" data-action="{{key}}" {{#if value}}onclick="htmlapi.showAction(this);"{{else}}disabled="disabled"{{/if}}>{{key}}</button>
      {{else}}
        <span class="inactive">None</span>
      {{/eachProperty}}
    </div>
    <br/>

    <label>Filter</label>
    <form onsubmit="htmlapi.filterApply(); return false;">
      <div id="filters">{{! Set based on schema/data }}</div>
    </form>
    <br/>

    {{#if data.sortLinks }}
      <form>
        <div class="row">
          <div class="col-xs-7">
            <label>Sort By</label>
            <select id="sortBy" class="form-control" onchange="htmlapi.sortChange(this)">
                {{#unless data.sort.name}}<option value="">(Not Sorted)</option>{{/unless}}
                {{#eachProperty data.sortLinks}}
                  <option value="{{key}}"{{#ifEqual ../../data.sort.name key}} SELECTED{{/ifEqual}}>{{key}}</option>
                {{/eachProperty}}
            </select>
          </div>
          <div class="col-xs-5">
            {{#if data.sort.name }}
              <label>Direction</label>
              <div class="btn-group btn-group-sm">
                {{#ifEqual data.sort.order "desc"}}
                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
                {{else}}
                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
                {{/ifEqual}}
              </div>
            {{/if}}
          </div>
        </div>
      </form>
    {{else}}
      <label>Sort</label>
      <p class="inactive">Not available</p>
    {{/if}}
    <br/>

    <label>Pagination</label>
    {{#if data.pagination}}
      <div>
        {{#if data.pagination.partial}}
          {{#if data.pagination.first}}
            {{#ifEqual data.links.self data.pagination.first}}
              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
            {{else}}
              <a class="btn btn-success btn-sm" href="{{data.pagination.first}}"><span class="glyphicon glyphicon-step-backward"></span></a>
            {{/ifEqual}}
          {{else}}
              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
          {{/if}}
          {{#if data.pagination.prev}}
            <a class="btn btn-success btn-sm" href="{{data.pagination.prev}}"><span class="glyphicon glyphicon-chevron-left"></span></a>
          {{else}}
              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-left"></span></button>
          {{/if}}
          {{#if data.pagination.next}}
            <a class="btn btn-success btn-sm" href="{{data.pagination.next}}"><span class="glyphicon glyphicon-chevron-right"></span></a>
          {{else}}
              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-right"></span></button>
          {{/if}}
          {{#if data.pagination.last}}
            <a class="btn btn-success btn-sm" href="{{data.pagination.last}}"><span class="glyphicon glyphicon-step-forward"></span></a>
          {{else}}
              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span></button>
          {{/if}}
        {{else}}
          <p class="inactive">Full result</p>
        {{/if}}
      </div>
      <div>
        <form class="form-horizontal">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">Limit:</span>
          <input class="form-control" type="number" min="0" step="100" id="limit" name="limit" value="{{data.pagination.limit}}"/>
          <span class="input-group-btn">
            <button type="submit" class="btn btn-primary btn-sm" onclick="htmlapi.setLimit($('limit').val())"><span class="glyphicon glyphicon-signal"></span> Set</button>
          </span>
        </div>
        </form>
      </div>
    {{else}}
      <p class="inactive">Not available</p>
    {{/if}}
    <br/>
  </div>

  <div class="footer">
    {{#if explorer}}
      <a href="#" onclick="Cookie.set('apiview','explorer'); explorer.show(); return false">Explorer View</a><br/>
    {{/if}}
    {{#if docsPage}}
      <a href="{{docsPage}}" target="apidocs">Documentation</a><br/>
    {{/if}}
    {{#if logout}}
      <a href="#" onclick="htmlapi.logout(); return false">Log Out</a>
    {{/if}}
  </div>
</div>

<div id="json" class="json"></div>
